<template>
	<view>
		<view class="tabBar" v-if="tabData.show">
			<view :class="['itemsTOp',item.id == tabData.tabIndex?'selectClass':'']" v-for="(item,index) in tableList"
				:key="index" @click="handleClickTab(item.id)">
				{{item.text}}
				<view class="lins" v-if="item.id == tabData.tabIndex"></view>
			</view>
		</view>
		<view class="" v-if="tabData.tabIndex != 2">
			<block v-for="(item,index) in formData" :key="index">
				<cardList :showType='cardShowTypeObj' :itemData='item' source='subscribe' @clearItem="handleClearItem"
					:userType="userType"></cardList>
			</block>
		</view>
		<view class="" v-else>
			<view class="card" style="padding-bottom: 0rpx;" v-for="(item,index) in formData" :key="index">
				<view class="list">
					<view class="rigth_box">
						<view class="title">
							{{item.contractName}}
						</view>
						<view class="title_1">
							<text style="width: 150rpx;">预约签订时间:</text> {{item.bookingTime}}
						</view>
						<view class="title_1">
							<text style="width: 150rpx;">联系方式:</text> {{item.phone}}
						</view>
					</view>
				</view>
				<view class="line" v-if="item.status == 0" />
				<view class="handle_box" v-if="item.status == 0">
					<view class="btn complete_btn" @click="handleJump(item)">
						上传合同
					</view>

				</view>
			</view>
		</view>
		<view class="main dis" style="z-index: 9999;height: 80vh;" v-if="formData.length == 0">
			<view style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
				<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/noData.png" mode="aspectFit"
					style="width: 200rpx;height: 200rpx;"></image>
				<text>暂无数据</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		onMounted,
		nextTick
	} from 'vue'
	import {
		appointments,
		appointmentsCancel,
		renewalPage
	} from './js/api.js'
	import http from '@/uitls/http.js'
	import {
		onReachBottom,
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	const cardShowTypeObj = reactive({
		infolabel: true,
		address: false,
		time: true,
		label: false
	})
	const paramsData = reactive({
		pageNum: 1,
		pageSize: 10
	})
	const formData = ref([])
	const isReach = ref(true)
	const getAppointments = async () => {
		let res = {}
		console.log(tabData.show,tabData.tabIndex)
		if (tabData.show && tabData.tabIndex == 2) {
			res = await renewalPage(paramsData)
		} else {
			res = await appointments(paramsData)
		}

		// console.log(res)
		if (res.data.code == 0) {
			let list = res.data.data.list
			if (paramsData.pageNum == 1) {
				formData.value = list
			} else {
				formData.value = formData.value.concat(list)
			}
			if (list.length < 10) isReach.value = false
			console.log('请求结束----', list)
		}


	}
	const appointCancel = async (id) => {
		let res = await appointmentsCancel(id)
		console.log(res)
		if (res.data.code < 0) {
			http.isMssage(res.data.message)
		} else {
			let list = formData.value
			let arryList = list.filter(item => item.id != id)
			console.log(arryList)
			formData.value = arryList
		}


		console.log('id===,', id)
	}
	const handleClearItem = (id) => {
		console.log('你点击了删除，，', id)
		uni.showModal({
			title: '提示',
			content: '确定删除嘛～？',
			success: function(res) {
				if (res.confirm) {
					appointCancel(id)
				} else if (res.cancel) {
					console.log('用户取消');
				}
			}
		});

	}
	onReachBottom(() => {
		// console.log('上拉触底')
		if (!isReach.value) return
		paramsData.pageNum++
		getAppointments()
	})

	onMounted(() => {
		console.log('请求开始----')
		// getAppointments()

	})
	const tabData = reactive({
		tabIndex: 1,
		show: false
	})
	
	const userType = ref('')
	onLoad(async(options) => {
		console.log('阿方索的广告',options.tabIndex)
		if(options.tabIndex == 2) tabData.tabIndex = 2
		 
		if (options.type == 'admin') {
			userType.value = 'admin'
			
			uni.setNavigationBarTitle({
				title: '全部预约'
			});
			tabData.show = true
			
		}
		await nextTick()
		
	})
	onShow(() => {
		// console.log('tabData.show',tabData.tabIndex)
		// if(!tabData.show)tabData.tabIndex = 1
		paramsData.pageNum = 1
		getAppointments()
	})


	const handleClickTab = (id) => {
		tabData.tabIndex = id
		paramsData.pageNum = 1
		getAppointments()
	}
	const tableList = ref([{
			id: 1,
			text: '看房预约'
		},
		{
			id: 2,
			text: '续签预约'
		}
	])
	const handleJump = (item) => {

		uni.navigateTo({
			url: '/pagesA/uploadContract/uploadContract?type=add&id=' + item.id + '&houseName=' + item.houseName +
				'&houseId=' + item.houseId + '&price=' + item.price + '&typeId=2' + '&manageAmount='+item.manageAmount
		})
	}
</script>
<style>
	page {
		background: #F6F6F6 !important;
	}
</style>
<style lang="less" scoped>
	.tabBar {
		width: 100%;
		height: 88rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.itemsTOp {
			width: 25%;
			height: 100%;
			font-family: PingFangSC-Regular;
			font-size: 28rpx;
			color: #4E4E4E;
			text-align: center;
			line-height: 28rpx;
			font-weight: 400;
			// border: 1px solid;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			.lins {
				background: #EE7930;
				border-radius: 5rpx;
				width: 36rpx;
				height: 4rpx;
				position: absolute;
				bottom: 0;
			}
		}

		.selectClass {
			font-family: PingFangSC-Semibold;
			font-size: 32rpx;
			color: #333333;
			text-align: center;
			line-height: 28rpx;
			font-weight: 600;
		}
	}

	.card {
		margin-top: 16rpx;
		padding: 30rpx;
		background: #FFFFFF;

		.list {
			display: flex;
			margin-bottom: 16rpx;
			position: relative;

			.photo {
				width: 230rpx;
				height: 204rpx;
				margin-right: 24rpx;
			}

			.rigth_box {
				.title {
					font-family: PingFangSC-Semibold;
					font-size: 30rpx;
					color: #000000;
					line-height: 36rpx;
					font-weight: 600;
					margin-bottom: 12rpx;
				}

				.title_1 {
					font-family: ArialMT;
					font-size: 24rpx;
					color: #666666;
					line-height: 26rpx;
					font-weight: 400;
					margin-bottom: 12rpx;
					display: flex;
				}
			}
		}

		.line {
			background: #eeeeee;
			height: 1rpx;
			// margin: 0 30rpx;
		}

		.handle_box {
			height: 86rpx;
			display: flex;
			justify-content: flex-end;
			align-items: center;

			.btn {
				height: 54rpx;
				width: 132rpx;
				line-height: 54rpx;
				text-align: center;
				font-family: PingFangSC-Regular;
				font-size: 24rpx;
				font-weight: 400;
				border-radius: 8rpx;
				margin-left: 16rpx;
			}

			// .cancel_btn {
			// 	border: 2rpx solid rgba(238, 121, 48, 1);
			// 	color: #EE7930;
			// 	margin-right: 16rpx;

			// }

			.complete_btn {
				background: #EE7930;
				color: #FFFDFC;

			}
		}
	}
</style>